<template xmlns="http://www.w3.org/1999/html">
  <div class="page">
    <div class="margin-bottom-sm text-sm">
      <mt-cell title="九方子单号：">
        <mt-field
          ref="ref_1"
          placeholder="支持九方子单号/运单号混合查找"
          v-model="subWaybillNo"
          @keyup.enter.native="findOrderNo"
        ></mt-field>
      </mt-cell>

      <mt-cell title="跟踪号：">
        <mt-field
          placeholder="非必填，不录入请移动光标"
          ref="ref_2"
          v-model="trackNo"
          @keyup.enter.native="findOrderNo"
        ></mt-field>
        <mt-button style="font-size:12px" size="small" type="primary" @click="findOrderNo"
          >查询</mt-button
        >
      </mt-cell>
    </div>

    <div class="flex margin-tb-sm">
      <div class="flex-sub ">
        <div class="showNum text-lg">
          {{ hasCount }}
        </div>
      </div>
      <div class="flex-twice text-lg flex justify-center flex-direction">
        <div>运单号：{{waybillNo}}</div>
        <div>应扫描数：{{ count }}</div>
        <div>剩余数：{{ remainCount }}</div>
      </div>
    </div>



      <!-- <mt-cell title="渠道名称：" :value="customerChannelName"></mt-cell>
      <mt-cell title="国家：" :value="countryName"></mt-cell>
      <mt-cell title="客户简称：" :value="customerNameShort"></mt-cell>
      <mt-cell title="客户代码：" :value="customerCode"></mt-cell> -->


    <div style="font-size: 15px" >
      <mt-cell title="未扫描运单列表：" ></mt-cell>
      <template v-for="(item, index) in noScanList">
        <template v-if="index%2 ==1">
          <th :key="index">{{ item }}</th></br>
        </template>
        <template v-else>
          <th :key="index" style="padding-right: 100px;padding-left: 30px;">{{ item }}</th>
        </template>
      </template>
    </div>

    <el-card style="margin-top: 20px">
      <el-table :data="subWaybills" style="width: 100%">
        <el-table-column prop="subWaybillNo" label="已扫子单号">
        </el-table-column>
        <el-table-column prop="hsubNumber" label="已扫FBA号"> </el-table-column>
        <el-table-column prop="htrackNo" label="已扫跟踪号"> </el-table-column>
      </el-table>
    </el-card>

    <div class="foot padding-lr-sm flex align-center justify-between">
      <mt-button type="primary" @click="saveAssociatTrackNum">保存</mt-button>
      <mt-button type="primary" @click="withdraw">撤回</mt-button>
    </div>
  </div>
</template>
<script>
import { ajax } from "@/store/yg/common/utils";
import axios from "axios";
import * as constant from "@/store/yg/common/constant";
import { Toast } from "mint-ui";

export default {
  components: {},
  props: [],
  data() {
    return {
      subWaybills: [
        {
          subWaybillNo: "",
          hsubNumber: "",
          htrackNo: ""
        }
      ],
      subwaybill: {
        subWaybillNo: "",
        hsubNumber: "",
        htrackNo: ""
      },
      noScanList: [],
      disable1: true,
      disable2: false,
      subWaybillNo: "",
      trackNo: "",
      hasCount: "",
      count: 0,
      remainCount: "",
      waybillNo: "",
      customerChannelName: "",
      countryName: "",
      customerNameShort: "",
      customerCode: "",
      waybillId: "",
      arrCounts: [],
      cursubNo: "",
      subBoxNoMap: {},
      trackNoMap: {}
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.initDat();
  },
  methods: {
    initDat() {
      this.subWaybills = [];
      this.$refs.ref_1.$refs.input.focus();
    },
    findOrderNo() {
      if (this.subWaybillNo && 0 == this.trackNo.length && this.disable1) {
        this.disable1 = false;
        this.disable2 = true;
        if (0 == this.arrCounts.length) {
          this.mixSearchOrder(this.subWaybillNo);
        } else {
          this.mixSearchOrder1(this.subWaybillNo);
        }
      }
      if (0 < this.trackNo.length && this.disable2) {
        this.disable1 = true;
        this.disable2 = false;
        this.showTrackNoInfo(this.trackNo);
      }
    },
    showTrackNoInfo(trackNumber) {
      var strategy = this.subWaybills.pop();
      strategy.htrackNo = trackNumber;
      this.subWaybills.push(strategy);
      var has = this.cursubNo in this.trackNoMap;
      if (!has) {
        this.trackNoMap[this.cursubNo] = trackNumber;
      }
      this.$refs.ref_1.$refs.input.focus();
      this.trackNo = "";
      /*ajax(
        "checkTrackNo",
        {
          trackNoStr: trackNumber,
          waybillId: this.waybillId
        },
        {
          type: "mobile"
        }
      ).then(
        res => {
          console.log(res);
          if (res.code == 200) {
            var strategy = this.subWaybills.pop();
            strategy.htrackNo = trackNumber;
            this.subWaybills.push(strategy);
            this.$refs.ref_1.$refs.input.focus();
            this.trackNo = "";
          } else {
            this.$message.error(res.message);
            this.disable1 = false;
            this.disable2 = true;
            this.trackNo = "";
          }
        },
        error => {
          console.log(error);
          this.disable1 = false;
          this.disable2 = true;
          this.trackNo = "";
        }
      );*/
    },
    mixSearchOrder(subNoVal) {
      ajax(
        "searchWaybillBySubWaybillNo",
        { subNoVal: subNoVal },
        { type: "mobile" }
      ).then(
        res => {
          if (res.code == 200) {
            var data = res.data;
            this.cursubNo = data.cursubNo;
            this.count = data.count;
            this.remainCount = data.count;
            this.waybillId = data.waybillId;
            if (this.cursubNo > this.count) {
              qiao.bs.alert("子单号不存在");
              return;
            }
            this.arrCounts.push(this.cursubNo);
            this.waybillNo = data.waybillNo; // 运单号
            this.customerChannelName = data.customerChannelName; // 渠道名称
            this.countryName = data.countryName; // 国家
            this.customerNameShort = data.customer.customerNameShort; // 客户简称
            this.customerCode = data.customer.customerCode; // 客户代码
            //this.subWaybills = data.subWaybills;
            this.hasCount = this.arrCounts.length;
            this.remainCount = parseInt(this.count) - parseInt(this.hasCount);
            this.subwaybill = {};
            this.subwaybill.subWaybillNo =
              this.waybillNo +
              "_" +
              data.subWaybills[this.cursubNo - 1].subWaybillNo;
            this.subwaybill.hsubNumber =
              data.subWaybills[this.cursubNo - 1].boxNo;
            for (var subwaybill of data.subWaybills) {
              var subWaybillNo = subwaybill.subWaybillNo;
              var boxNo = subwaybill.boxNo;
              this.subBoxNoMap[subWaybillNo] = boxNo;
              if (subWaybillNo!=this.cursubNo){
                this.noScanList.push(this.waybillNo +"-"+subWaybillNo);
              }
            }
            this.subWaybills.push(this.subwaybill);
            this.$refs.ref_2.$refs.input.focus();
            this.subWaybillNo = "";
          } else {
            Toast("操作失败"+res.message);
            this.disable1 = true;
            this.disable2 = false;
            this.subWaybillNo = "";
          }
        },
        error => {
          this.disable1 = true;
          this.disable2 = false;
          this.subWaybillNo = "";
          console.log(error);
          this.$router.push('/login');
        }
      );
    },
    mixSearchOrder1(subNoVal) {
      if (-1 != subNoVal.indexOf("-")) {
        var indexNo = this.noScanList.indexOf(subNoVal);
        if (indexNo!=-1){
          this.noScanList.splice(indexNo, 1);//存在即删除
        }
        if (this.waybillNo == subNoVal.substr(0, subNoVal.indexOf("-"))) {
          this.cursubNo = subNoVal.substr(
            subNoVal.indexOf("-") + 1,
            subNoVal.length
          ); //当前子单号
          if (this.cursubNo > this.count) {
            Toast("子单号不存在");
            this.$refs.ref_1.$refs.input.focus();
            this.disable1 = true;
            this.disable2 = false;
            return false;
          }
          if (this.arrCounts.indexOf(this.cursubNo) > -1) {
            Toast("当前货箱已经扫描");
            this.$refs.ref_1.$refs.input.focus();
            this.disable1 = true;
            this.disable2 = false;
            return false;
          }
          this.arrCounts.push(this.cursubNo); // 已经扫描件数
          this.hasCount = this.arrCounts.length; // 总件数
          this.remainCount = parseInt(this.count) - parseInt(this.hasCount); // 剩余件数
          var hfbaNumber = this.subBoxNoMap[this.cursubNo]; //当前FBA号
          this.subwaybill = {};
          this.subwaybill.subWaybillNo = subNoVal;
          this.subwaybill.hsubNumber = hfbaNumber;
          this.subWaybills.push(this.subwaybill);
          this.$refs.ref_2.$refs.input.focus();
          this.subWaybillNo = "";
        } else {
          this.$message.error("一次只能扫描一个运单的数据");
          this.$refs.ref_1.$refs.input.focus();
          this.disable1 = true;
          this.disable2 = false;
          return false;
        }
      } else {
        let tmpcursubNo = "";
        for (const i in this.subBoxNoMap) {
          if (subNoVal == this.subBoxNoMap[i]) {
            tmpcursubNo = i;
          }
        }

        if (!tmpcursubNo) {
          Toast("FBA号错误");
          this.$refs.ref_1.$refs.input.focus();
          return false;
        }
        if (this.arrCounts.includes(tmpcursubNo)) {
          Toast("当前货箱已经扫描");
          this.$refs.ref_1.$refs.input.focus();
          this.disable1 = true;
          this.disable2 = false;
          return false;
        }
        this.cursubNo = tmpcursubNo;
        this.arrCounts.push(this.cursubNo);
        this.hasCount = this.arrCounts.length; // 已经扫描件数
        this.remainCount = parseInt(this.count) - parseInt(this.hasCount); // 剩余件数
        this.subNoVal = this.waybillNo + "-" + this.cursubNo;
        var indexNo = this.noScanList.indexOf(this.subNoVal);
        if (indexNo!=-1){
          this.noScanList.splice(indexNo, 1);//存在即删除
        }
        var hfbaNumber = this.subBoxNoMap[this.cursubNo]; //当前FBA号
        this.subwaybill = {};
        this.subwaybill.subWaybillNo = this.subNoVal;
        this.subwaybill.hsubNumber = hfbaNumber;
        this.subWaybills.push(this.subwaybill);
        this.$refs.ref_2.$refs.input.focus();
        this.subWaybillNo = "";
      }
    },
    withdraw() {
      if (this.subWaybills[this.subWaybills.length - 1].htrackNo) {
        if (this.remainCount + this.hasCount == this.count) {
          this.remainCount = ++this.remainCount; // 剩余件数
        }
        this.hasCount = --this.hasCount;
        this.$delete(this.subWaybills[this.subWaybills.length - 1], "htrackNo");
        this.$refs.ref_2.$refs.input.focus();
        this.disable1 = false;
        this.disable2 = true;
      }
    },
    saveAssociatTrackNum() {
      if (!this.waybillId) {
        Toast("请先录入数据");
        this.$refs.ref_1.$refs.input.focus();
        return false;
      }
      if (this.count != this.hasCount) {
        Toast("已扫件数不等于应扫描件数");
        this.$refs.ref_1.$refs.input.focus();
        return false;
      }

      if (!this.trackNoMap["waybillId"]) {
        this.trackNoMap["waybillId"] = this.waybillId;
      }
      var trackNoStr = JSON.stringify(this.trackNoMap);
      ajax(
        "saveAssociatTrackNum",
        { trackNoStr: trackNoStr },
        { type: "mobile" }
      )
        .then(res => {
          console.log(res);
          if (res.code == 200) {
            Toast("保存成功");
            this.timeout = setTimeout(() => {
              location.reload();
            }, 1000 * Math.random());
          }else{
            Toast("操作失败"+res.message);
          }
        })
        .catch(error => {
          console.log(error);
          this.$message.error("保存失败，" + error);
        });
    }
  }
};
</script>
<style scoped>
.page >>> .mint-cell-value {
  flex: 2;
}

.page >>> .el-table th {
  font-size: 16px;
}
/deep/ .mint-button--small{
  padding: 0 8px;
}
</style>

<style lang="scss" scoped>
.page {
  padding-bottom: 50px;

  .showNum {
    border: 2px solid red;
    width: 2.5em;
    height: 2.5em;
    margin: 0 auto;
    line-height: 2.5em;
    text-align: center;
    border-radius: 100%;
    box-sizing: border-box;
    color: red;
    font-size: 24px;
  }

  .foot {
    background: rgba(40, 44, 48, 1);
    padding: 4px;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
  }
}
</style>
